<ui:composition template="../index/index.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

	<ui:define name="content">
		<h:form>

			<h:panelGrid columns="2">
			
				<h:outputLabel value="Fluxo de Caixa: " for="eixoY" />
				<p:selectOneMenu id="sentido" value="#{fluxoCaixaBean.sentidoSelecionado}">
					<f:selectItem itemLabel="Gasto" itemValue="OUT" />
					<f:selectItem itemLabel="Receita" itemValue="IN" />
					<f:selectItem itemLabel="Comparacao Gasto e Receita" itemValue="INOUT" />
				</p:selectOneMenu>
			
				<h:outputLabel value="Tipo de Gráfico: " for="tipoGrafico" />
				<p:selectOneMenu id="tipoGrafico" value="#{fluxoCaixaBean.tipoGrafico}">
					<f:selectItem itemLabel="Barra" itemValue="BARRA" />
					<f:selectItem itemLabel="Linha" itemValue="LINHA" />
					<f:selectItem itemLabel="Pizza" itemValue="PIZZA" />
				</p:selectOneMenu>
				
				<h:outputText value="Data Inicial: " />
				<p:calendar value="#{fluxoCaixaBean.dataInicial}" />

				<h:outputText value="Data Final: " />
				<p:calendar value="#{fluxoCaixaBean.dataFinal}" />
				
				<h:outputText value="Granularidade: " />
				<p:selectOneMenu value="#{fluxoCaixaBean.step}">
					<f:selectItem itemLabel="Dia" itemValue="DIA" />
					<f:selectItem itemLabel="Mes" itemValue="MES" />
					<f:selectItem itemLabel="Ano" itemValue="ANO" />
				</p:selectOneMenu>

				<h:outputText value="Departamentos: " />
				<p:pickList value="#{fluxoCaixaBean.dptosDual}"  converter="departamentoConverter"
                var="dpto"  
                itemLabel="#{dpto}"  
                itemValue="#{dpto}" />
				

				
				<h:outputText value="Planos de Saúde: " />
				<p:pickList id="pickList" value="#{fluxoCaixaBean.planosDual}" converter="planoSaudeConverter"  
                var="plano"  
                itemLabel="#{plano.nome}"  
                itemValue="#{plano.id}" />
                
			</h:panelGrid>

			<h:commandButton action="#{fluxoCaixaBean.gerarGrafico}"
				value="Gerar Gráfico" />

		</h:form>

		<h:panelGroup rendered="#{fluxoCaixaBean.tipoGrafico == 'BARRA'}">
			<p:barChart id="basic" value="#{fluxoCaixaBean.categoryModel}"
				legendPosition="ne" min="0"
				max="#{fluxoCaixaBean.maxEixoY}" style="height:300px" />
		</h:panelGroup>

		<h:panelGroup rendered="#{fluxoCaixaBean.tipoGrafico == 'LINHA'}">
			<p:lineChart id="linear" value="#{fluxoCaixaBean.categoryModel}"
				legendPosition="e"  minY="0"
				maxY="#{fluxoCaixaBean.maxEixoY}" style="height:300px" />
		</h:panelGroup>

		<h:panelGroup rendered="#{fluxoCaixaBean.tipoGrafico == 'PIZZA'}">
			<p:pieChart id="sample" value="#{fluxoCaixaBean.pieModel}"
				legendPosition="w" 
				style="width:400px;height:300px" />
		</h:panelGroup>
		
		<p:fieldset legend="Lista de Itens Filtrados"
				style="margin-top:10px">
				<p:dataTable paginator="true" rows="8" var="trans"
					value="#{fluxoCaixaBean.relatorio}">
					
					<p:column headerText="Data Realizada">
						<h:outputText value="#{trans.dataRealizacao}" />
					</p:column>
					
					<p:column headerText="Departamento">
						<h:outputText value="#{trans.departamento}" />
					</p:column>
					
					<p:column headerText="Beneficiario">
						<h:outputText value="#{trans.beneficiario.nome}" />
					</p:column>
					
					<p:column headerText="Pagador">
						<h:outputText value="#{trans.pagador.nome}" />
					</p:column>
					
					<p:column headerText="Valor">
						<h:outputText value="#{trans.valor}" />
					</p:column>
					
				</p:dataTable>
			</p:fieldset>

	</ui:define>
</ui:composition>